<script setup>
import { onBeforeRouteLeave, useRouter } from "vue-router"
import { onMounted, ref, watch } from "vue"
import Pre2Page from './Pre2Page.vue'
import Pre3Page from './Pre3Page.vue'
import PreBook from './PreBook.vue'
import Pre4Page from "./Pre4Page.vue"
//固定整个界面高度
onMounted(() => {
  document.body.style.height = window.innerHeight + 'px'
  document.body.style.overflow = 'hidden'
})
const controller = new AbortController();

const isAnimate = ref(false)
const nowPage = ref(1), pageSize = ref(5)
//0为上下，1为左右
const pageInfo = ref([
 {x:0,y:0}, { x: 0, y: 0 }, { x: 0, y:0 }, { x: 0, y: -100 }, { x: 0, y: -100 },{x:0,y:-200}
])
onMounted(() => {
  //监听窗口大小变化
  addEventListener('resize', () => {
    document.body.style.height = window.innerHeight + 'px'
  }, { signal: controller.signal })
  //监听动画结束
  document.body.addEventListener('transitionend', () => {
    isAnimate.value = false
  }, { signal: controller.signal })
  //监听滚轮滚动，然后移动页面
  document.addEventListener('wheel', (event) => {
    // console.log('滚动')
    if (isAnimate.value) return
    checkScroll(event)
  }, { signal: controller.signal })

})
//在界面退出之后，移除监听事件
onBeforeRouteLeave(() => {
  document.body.style = ''
  console.log('移除监听事件')
  controller.abort()
})
//PreBook组件
const book = ref(null)
//监听page的变化
watch(nowPage, (newVal, oldVal) => {
  document.body.style.transition = '0.7s'
  //方向0向上1向下
  let dir = 0
  let box1 = document.querySelector('.box1')
  let box2 = document.querySelector('.box2')
  if (newVal > oldVal) dir = 1

  if (newVal === 1) {
    if (dir === 1) {
      box1.style.transition = 'none'
      box1.style.transform = `translateX(0)`
    }
    else {
      box1.style.transition = '0.7s'
      box1.style.transform = `translateX(0)`
    }
  }
  else if (newVal === 2) {
    if (dir === 1) {
      box1.style.transition = '0.7s'
      box1.style.transform = `translateX(-100%)`
    }
    else {
      //todo
      box1.style.transition = 'none'
      box1.style.transform = `translateX(-100%)`
    }
  }
  else if (newVal === 3) {
    if (dir === 1) {
      book.value.pageChange(1)
    }
    else {
      book.value.pageChange(1)
    }
  }
  else if (newVal === 4) {
    if (dir === 1) {
      book.value.pageChange(2)
    }
  }
  document.body.style.transform = `translateY(${pageInfo.value[newVal].y}%)`
})
const checkScroll = (event) => {
  if (event.deltaY > 0) {
    downScroll()
  }
  else {
    upScroll()
  }
  // console.log('滚动')
}
const downScroll = () => {
  if (nowPage.value === pageSize.value) {
    // nowPage.value = 1
    return
  }
  nowPage.value++
  // console.log('向下滚动')
  isAnimate.value = true
}
const upScroll = () => {
  if (nowPage.value === 1) {
    return
  }
  nowPage.value--
  // console.log('向上滚动')
  isAnimate.value = true
}
const handelChangePage = (page) => {
  nowPage.value = page
}
</script>
<template>
  
  <Pre2Page class="box1" :nowPage="nowPage" @change-page="handelChangePage"></Pre2Page>
  <PreBook ref="book"></PreBook>
  <!-- <Pre3Page class="box2" :nowPage="nowPage" @change-page="handelChangePage"></Pre3Page> -->
   <Pre4Page></Pre4Page>
  
</template>


<style scoped>
</style>